/*
 * @Author: C.
 * @Date: 2024-07-31 15:42:46
 */
/*
 * @Author: C.
 * @Date: 2024-07-30 14:49:28
 */
import { ref, computed, reactive, toRaw, unref, onMounted } from "vue";
import type { ComputedRef, CSSProperties } from "vue";
import type { IDragBoxProps, IPositon } from "../types";
import { Fn } from "@/global";
import { buildUUID } from "../uuid";
type ActionType = {
  parentPosition: IPositon;
  boxMsg: any;
  setX: Fn;
  setY: Fn;
  setH: Fn;
  setW: Fn;
  updateBoxStore: Fn;
  hideMarkLine: Fn;
};
export function useDragBox(
  props: ComputedRef<IDragBoxProps>,
  {
    parentPosition,
    boxMsg,
    setX,
    setY,
    setH,
    setW,
    updateBoxStore,
    hideMarkLine
  }: ActionType
) {
  const dragBoxId = buildUUID();
  let shortCut = JSON.parse(JSON.stringify(boxMsg));
  // 偏移值
  let diffX = 0;
  let diffY = 0;
  //拖拽状态
  const dragState = ref(false);
  // 拖拽类型
  const dragType = ref("move");

  const dragStart = (e: MouseEvent) => {
    dragState.value = true;
    // 鼠标按下时记录当前鼠标位置和元素位置的差值
    diffX = e.clientX - boxMsg.x;
    diffY = e.clientY - boxMsg.y;
    // 快照
    shortCut = JSON.parse(JSON.stringify(boxMsg));
    // 监听鼠标移动和释放事件
    window.addEventListener("mousemove", drag);
    window.addEventListener("mouseup", dragEnd);
  };
  const drag = (e: MouseEvent) => {
    updateBoxStore(dragBoxId, boxMsg);
    let mouseX = e.clientX;
    let mouseY = e.clientY;

    switch (dragType.value) {
      case "move":
        setX(mouseX - diffX);
        setY(mouseY - diffY);
        break;
      case "right":
        setW(mouseX - boxMsg.x - parentPosition.x);
        break;
      case "left":
        setX(mouseX - diffX);
        setW(shortCut.w + shortCut.x - mouseX + parentPosition.x);
        break;
      case "top":
        setY(mouseY - diffY);
        setH(shortCut.h + shortCut.y - mouseY + parentPosition.y);
        break;
      case "bottom":
        setH(mouseY - boxMsg.y - parentPosition.y);
        break;
      case "lt":
        setX(mouseX - diffX);
        setY(mouseY - diffY);
        setW(shortCut.w + shortCut.x - mouseX + parentPosition.x);
        setH(shortCut.h + shortCut.y - mouseY + parentPosition.y);
        break;
      case "rt":
        setW(mouseX - boxMsg.x - parentPosition.x);
        setY(mouseY - diffY);
        setH(shortCut.h + shortCut.y - mouseY + parentPosition.y);
        break;
      case "lb":
        setX(mouseX - diffX);
        setW(shortCut.w + shortCut.x - mouseX + parentPosition.x);
        setH(mouseY - boxMsg.y - parentPosition.y);
        break;
      case "rb":
        setW(mouseX - boxMsg.x - parentPosition.x);
        setH(mouseY - boxMsg.y - parentPosition.y);
        break;

      default:
        break;
    }
  };

  const dragEnd = () => {
    // updateBoxStore(dragBoxId, boxMsg);
    hideMarkLine();
    dragState.value = false;
    resizeStart("move");
    // 鼠标释放时移除事件监听
    window.removeEventListener("mousemove", drag);
  };
  const resizeStart = (type = "right") => {
    dragType.value = type;
  };
  const dragStyle = computed<CSSProperties>(() => {
    return {
      left: boxMsg.x + "px",
      top: boxMsg.y + "px",
      height: boxMsg.h + "px",
      width: boxMsg.w + "px",
      background: boxMsg.bg,
      "user-select": dragState.value ? "none" : "text",
      cursor: dragState.value ? "grabbing" : ""
    };
  });
  onMounted(() => {
    updateBoxStore(dragBoxId, boxMsg);
    hideMarkLine();
  });
  return {
    dragStart,
    dragStyle,
    boxMsg,
    resizeStart
  };
}
